<template>
    <div id="edit_user_info">
      <header class="mui-bar mui-bar-nav">
        <a class=" mui-icon mui-pull-left arr_left" @tap="close_edit_user_info">
        </a>
        <h1 class="mui-title">编辑个人信息</h1>
        <a class="mui-pull-right" @tap="updata_user_info">提交</a>
      </header>

      <div class="address_form" style="padding-top: 50px">
        <div class="hr_20"></div>
        <div class="imgs" @tap="open_upload_img_view">
          <div class="text_row_80" style="border: none; font-size: 14px;">点击头像更换</div>
          <div id="has_img">

            <div class="img_item" >
              <div class="has_img">
                <img :src="$store.state.home_status.upload_user_imgs" />
              </div>
            </div>

          </div>

        </div>
        <div class="hr_20"></div>
        <div class="text_row_100">
          <span class="fl fs_28">昵称 :</span>
          <input class="fl fs_24 input" v-model="user_name" type="text" placeholder="请输入昵称" />

        </div>



      </div>
    </div>
</template>

<script>
  import account_ajax from "../../ajax/account_ajax"

    export default {
        name: "edit_user_info",
      data(){
          return{
            user: '',
            add_img_flag: '',
            user_name:''
          }
      },
      methods:{
        open_upload_img_view(){
          this.$store.commit('open_upload_img_view', "show")
        },
        updata_user_info(){
          account_ajax.updata_user_info({
            uid:this.$store.state.account.user_info.uid,
            user_img:this.$store.state.home_status.upload_user_imgs,
            nickname:this.user_name
          },res=>{
            if(res){
              mui.toast("修改成功");
              let user_info = this.$store.state.account.user_info;
              user_info.head = this.$store.state.home_status.upload_user_imgs;
              user_info.nickname = this.user_name;
              this.$store.commit("up_data_user",user_info)
              setTimeout(()=>{
                this.close_edit_user_info()
              },300)
            }
          })
        },
        close_edit_user_info(){
          this.$store.commit("open_edit_user_info_view",false)
        }
      },
      created(){
        // 设置图片上传类型为 用户头像
        this.$store.commit("change_upload_img_type","user");
        // 设置当前用户头像为 用户信息中的头像
        let user_img = this.$store.state.account.user_info.head;

        let d  = new Date();
        let random = parseInt(Math.random()*1000000);
        let times = d.getTime();

        this.$store.commit("save_upload_img_url",{
          path:user_img,
          sign:times+""+random
        });

        // 设置当前用户名为用户未修改的头像
        this.user_name = this.$store.state.account.user_info.nickname
      }
    }
</script>

<style scoped>
  #edit_user_info{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f6f6f6;
    z-index: 10001;
  }

  html,
  body,
  .mui-content {
    background-color: #ffffff;
    font-family: "微软雅黑";
  }
  .mui-action-back {
    height: 44px;
    width: 44px;
  }
  .mui-action-back img {
    width: 100%;
  }
  .mui-content {
    padding-bottom: 50px;
    padding-top: 44px !important;
  }
  .arr_left {
    background-image: url(../../assets/images/ptsp/left_arr_03.png);
    background-size: 24px 24px;
    background-position: center;
    background-repeat: no-repeat;
  }
  .mui-title {
    font-size: 0.768rem;
  }
  .mui-bar-nav a {
    font-size: 0.5973rem;
    color: #888888;
    line-height: 44px;
  }
  .fl {
    float: left;
  }
  .fr {
    float: right;
  }
  ul,
  li,
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  b,
  i {
    margin: 0;
    padding: 0;
    font-weight: normal;
    list-style: none;
  }
  .hr_10 {
    width: 100%;
    height: 0.2133rem;
    background-color: #f6f6f6;
  }
  .hr_15 {
    width: 100%;
    background-color: #f6f6f6;
    height: 0.32rem;
  }
  .hr_20 {
    width: 100%;
    background-color: #f6f6f6;
    height: 0.4267rem;
  }
  .hr_25 {
    background-color: #f6f6f6;
    width: 100%;
    height: 0.5333rem;
  }
  .show_text_1_line {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .show_text_2_line {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .show_text_3_line {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
  .bg_liner {
    background: linear-gradient(to right, #1cb5fc, #1c83fc);
  }
  .fs_20 {
    font-size: 0.4267rem;
  }
  .fs_22 {
    font-size: 0.4693rem;
  }
  .fs_24 {
    font-size: 0.512rem;
  }
  .fs_26 {
    font-size: 0.5547rem;
  }
  .fs_28 {
    font-size: 0.5973rem;
  }
  .fs_30 {
    font-size: 0.64rem;
  }
  .fs_32 {
    font-size: 0.6827rem;
  }
  .fs_34 {
    font-size: 0.7253rem;
  }
  .fs_36 {
    font-size: 0.768rem;
  }
  html,
  body,
  .mui-content {
    height: 100%;
  }
  .mui-content {
    background-color: #f6f6f6;
  }
  .address_form {
    background-color: #FFFFFF;
  }
  .address_form .text_row_100 {
    padding: 0 0.64rem;
    height: 2.1333rem;
    line-height: 2.1333rem;
    border-bottom: 1px solid #e5e5e5;
    overflow: hidden;
  }
  .address_form .text_row_100 .input {
    margin: 0;
    padding: 0;
    border: none;
    width: 10.4533rem;
    height: 2.1333rem;
    line-height: 2.1333rem;
    padding-left: 0.2133rem;
  }
  .address_form .text_row_100 .icon {
    height: 2.1333rem;
    line-height: 2.1333rem;
  }
  .address_form .text_row_100 .icon-qr {
    height: 2.1333rem;
    line-height: 2.1333rem;
    font-size: 1.0667rem;
    color: #1c83fc;
  }
  .address_form .text_row_100:last-child {
    border-bottom: none;
  }
  .imgs {
    padding: 0 0.64rem;
    overflow: hidden;
  }
  .imgs .img_item {
    position: relative;
    float: left;
    width: 3.2rem;
    height: 3.2rem;
    border: 1px solid #e5e5e5;
    margin-left: 0.3413rem;
    margin-bottom: 0.3413rem;
  }
  .imgs .img_item .has_img {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .imgs .img_item .has_img img {
    width: 100%;
  }
  .imgs .img_item .mui-icon-closeempty {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 18px;
    color: #FFFFFF;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: hidden;
    border-radius: 50%;
  }
  .imgs .add_img {
    padding-top: 0.64rem;
    text-align: center;
  }
  .imgs .add_img i {
    font-size: 1.28rem;
  }
  .imgs .add_img .fs_20 {
    color: #888888;
  }
  .text_row_80 {
    height: 1.7067rem;
    line-height: 1.7067rem;
  }
  .text_info {
    padding: 0.64rem;
  }
  .text_info textarea {
    border: none;
  }
  .fbwz {
    padding-top: 0.4267rem;
  }
  .sqwtfk .feedback_top {
    padding: 0.64rem;
  }
  .sqwtfk .feedback_top .feedback_tx {
    width: 1.7067rem;
    height: 1.7067rem;
    float: left;
  }
  .sqwtfk .feedback_top .star_box {
    float: left;
    color: #B5B5B5;
    font-size: 0.768rem;
    height: 1.7067rem;
    line-height: 1.7067rem;
  }
  .sqwtfk .feedback_top .star_box .mui-icon {
    font-size: 0.9387rem;
  }
  .sqwtfk .feedback_top .star_box .mui-icon-star-filled {
    color: #FFB400;
  }
  html,
  body,
  .mui-content {
    background-color: #f6f6f6;
  }

  .ptsp_top_stats {
    height: 20px;
    width: 100%;
    background-color: #ffffff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
  }

  .mui-action-back {
    height: 44px;
    width: 44px;
  }

  .mui-action-back img {
    width: 100%;
  }



  .mui-content {
    padding-bottom: 100px;
    padding-top: 44px !important;
  }

  .arr_left {
    background-image: url(../../assets/images/ptsp/left_arr_03.png);
    background-size: 24px 24px;
    background-position: center;
    background-repeat: no-repeat;
  }

  .mui-title {
    font-size: 0.768rem;
  }

  .mui-bar-nav a {
    font-size: 0.5973rem;
    color: #888888;
    line-height: 44px;
  }
</style>
